<template>
    <div class="content">
        <el-card>

            <div class="StoreTitle">
                <el-row>
                    <el-col :span="1">
                        <div class="item" style="justify-content: center; align-items: center">
                            <el-image style="width: 60px; height: 60px; border-radius: 50%" :src="url" />
                        </div>
                    </el-col>
                    <el-col :span="3">
                        <div class="item" style="
                flex-direction: column;
                justify-content: space-between;
                align-items: center;
              ">
                            <div style="display: flex; justify-content: space-between">
                                <p style="font-size: 19px; font-weight: bold; margin-right: 5px">
                                    来伊份
                                </p>
                                <p style="color: rgb(230, 90, 107)">[联营中]</p>
                            </div>
                            <div><span>成立时间:</span> <span>2017-3-15</span></div>
                        </div>
                    </el-col>
                    <el-col :span="5">
                        <div class="item item-list">
                            <div class="flex gap-2">
                                <el-tag type="primary" style="margin-right: 10px">
                                    直营项目
                                </el-tag>
                                <el-tag type="primary" style="margin-right: 10px">
                                    线下
                                </el-tag>
                                <el-tag type="warning" style="margin-right: 10px">
                                    快消品零售
                                </el-tag>
                            </div>
                            <div>
                                <span>门店模式:</span> <span>直营店</span><span>,</span><span>加盟店</span>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="item" style="justify-content: center; align-items: flex-start">
                            <div class="flex gap-2">
                                <el-tag type="primary" style="margin-right: 10px">
                                    导入信息
                                </el-tag>
                                <el-tag type="primary" style="margin-right: 10px">
                                    导入店铺
                                </el-tag>
                                <el-tag type="warning" style="margin-right: 10px">
                                    联营计算
                                </el-tag>
                                <el-tag type="warning" style="margin-right: 10px">
                                    导出Excel
                                </el-tag>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="1">
                        <div class="border"></div>
                    </el-col>
                    <el-col :span="8">
                        <div class="item">
                            <div class="item item-list">
                                <div>店铺总数:31</div>
                                <div>联营店铺:5</div>
                            </div>

                            <div class="item item-list">
                                <div>联营综合:31</div>
                                <div>联营总额:500万</div>
                            </div>

                            <div class="item item-list">
                                <div>联系人：王小二</div>
                                <div>联系方式:13888888888</div>
                            </div>
                        </div>
                    </el-col>
                </el-row>


            </div>
            <!-- 底部一块 -->
            <template #footer>
                <div class="Storedata">
                <el-row>
                    <el-col :span="8">
                        <div class="left">
                            <div class="left-left">
                                <p class="headerword">378.10万</p>
                                <p>累计分账(2024-04-28)</p>
                            </div>
                            <div class="left-right">
                                <p>开始联营:2024-01-03</p>
                                <p>联营时间:248天</p>
                                <p>应收回款:121.90万</p>

                            </div>
                            <div class="bordertwo"></div>
                        </div>

                    </el-col>

                    <el-col :span="7">
                        <div class="center">
                            <div class="centerleft">
                                <div id='pieleft' style="width:75px; height: 75px"></div>
                            <div class="word">
                                <p>剩余联营时间</p>
                                <p>148天</p>
                            </div>
                            </div>
                            <div class="centerleft">
                                <div id='pieright' style="width:75px; height: 75px"></div>
                            <div class="word">
                                <p>分账进度</p>
                                <p>80.76%</p>
                            </div>
                            </div>
                           
                        </div>

                    </el-col>
                    <el-col :span="8">
                        <div class="right">
                            <div class="borderthreee"></div>
                            <div class="rightall">
                                <div class="top">
                                    上一日(2023-08-12)经营数据
                                </div>
                                <div class="bottom">
                                    <div class="data">
                                        <p class="word">14787<span>2.41%</span></p>
                                        <p>总交易额</p>
                                    </div>
                                    <div class="data">
                                        <p class="word">14787<span>2.41%</span></p>
                                        <p>总收入额</p>
                                    </div>
                                    <div class="data">
                                        <p class="word">147872<span>2.41%</span></p>
                                        <p>总分账额</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
            </template>
            



        </el-card>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts';
const url = "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg";
function pieEchatrs(a:any){
    let  myChart = echarts.init(a);
    
    myChart.setOption({
        series: [
            {
                type: 'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    show: true,
                    position: 'center'
                },
                labelLine: {
                    show: false
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '20',
                        fontWeight: 'bold'
                    }
                },
                itemStyle: {
                    normal: {
                        color: function (colors:any) {
                            var colorList = [
                                '#0096fa',
                                '#e9e9e9',
                            ];
                            return colorList[colors.dataIndex];
                        }
                    },
                },
                    data: [
                        { value: 335, name: '可改' },
                        { value: 310, name: 'B' },
                   
                ]
            }
        ]
    });


}
onMounted(() => {
    // 基于准备好的dom，初始化echarts实例
  
    pieEchatrs(document.getElementById('pieleft'))
    pieEchatrs(document.getElementById('pieright'))

})
</script>

<style scoped lang="less">
.content {
    width: 100%;
    height: 100%;

    .StoreTitle {
        height: 70px;
        width: 100%;
        padding-bottom: 10px;
        .item {
            height: 100%;
            display: flex;
            justify-content: space-between;
        }

        .border {
            width: 0px;
            height: 70px;
            position: relative;
        }

        .border::after {
            width: 0px;
            height: 107px;
            content: "";
            border: 0.1px solid #e4e7ed;
            position: absolute;
            top: -20px;
        }

        .item-list {
            flex-direction: column;
            justify-content: space-between;
            align-items: flex-start;
            
        }

    }

    .Storedata {
        height: 110px;
        align-items: center;

        .left {
            height: 110px;
            padding-right: 20px;
            display: flex;
            justify-content: space-around;

            .left-left {
                display: flex;
                flex-direction: column;
                justify-content: space-around;

                .headerword {
                    color: rgb(230, 93, 121);
                    font-size: 22px;
                }
            }

            .left-right {
                display: flex;
                flex-direction: column;
                justify-content: space-around
            }

            .bordertwo {
                width: 0px;
                height: 110px;
                position: relative;
            }

            .bordertwo::after {
                width: 0px;
                height: 145px;
                content: "";
                border: 0.1px solid #e4e7ed;
                position: absolute;
                top: -19px;
            }
        }

        .center {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 110px;
            padding-right: 35px;
            .centerleft{
                display: flex;
                align-items: center;
                .word{
                    height: 80px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                    p:nth-child(2){
                        font-size: 22px;
                    }
                }
            }
           
        }
        .right{
            width: 100%;
            display: flex;
            height: 110px;
            .borderthreee {
                width: 0px;
                height: 140px;
                position: relative;
            }
            .borderthreee::after {
                width: 0px;
                height: 150px;
                content: "";
                border:  0.1px solid #e4e7ed;
                position: absolute;
                top: -20px;
            }
            .rightall{
                width: 100%;
                height: 110px;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                align-items: center;
                padding-left: 50px;
                .top{
                    width: 100%;
                    background-color: #f2f2f2;
                    padding: 3px 30px;
                }
                .bottom{
                    display: flex;
                    width: 100%;
                    height: 50px;
                    text-align: center;
                    justify-content: space-between;
                    .data{
                        display: flex;
                        height: 50px;
                        flex-direction: column;
                        justify-content: space-around;
                        .word{
                            display: flex;
                            color: #eb7c97;
                            span{
                                display: inline-block;
                                font-size: 14px;
                                padding-top: 2px;
                            }
                        }
                    }
                    
                }

            }
        }
    }
}
</style>